<template>
  <div class="add-pop-warpper">
    <div class="model-box">
      <div class="model-msg-box">
        <p>{{saveData.modelName}}</p>
      </div>
      <div class="list-warpper">
        <el-radio-group
          v-model="saveData.sourceColumnId"
          @change="handleChangeModelProp(saveData.sourceColumnId)"
        >
          <el-radio
            v-for="item in propsList"
            :key="item.logicalModelFieldId"
            :label="item.logicalModelFieldId"
          >
            {{item.columnField}} ({{item.columnName}})
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <div>
      <el-button
        v-if="saveData.relationName==='引用'"
        type="primary"
        icon='el-icon-right'
        @click="changeRelationName('被引用')"
      >引用</el-button>
      <el-button
        v-if="saveData.relationName=='被引用'"
        @click="changeRelationName('引用')"
        type="primary"
        icon='el-icon-back'
      >被引用</el-button>
    </div>
    <div class="model-box">
      <div>
        <el-button
          type="primary"
          plain
          @click="switchModelList"
        >{{saveData.targetModelName}}<i class="el-icon-edit"></i></el-button>
      </div>
      <div class="list-warpper">
        <el-radio-group
          v-model="saveData.targetColumnId"
          v-if='!modelListShow'
          @change="handleChangeTargetProp(saveData.targetColumnId)"
        >
          <el-radio
            v-for="item in targetPropsList"
            :key="item.logicalModelFieldId"
            :label="item.logicalModelFieldId"
          >
            {{item.columnField}} ({{item.columnName}})
          </el-radio>
        </el-radio-group>
        <div v-if="modelListShow">
          <div
            v-for="model in modelList"
            :key="model.key"
            class="list-item"
            :class="{active:saveData.targetModelId == model.key}"
            @click='handleChangeModel(model)'
          >
            {{model.value}}
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "addRelation",
  components: {},
  props: {
    rowData: {
      type: Object,
      value: {},
    },
  },
  data: () => {
    return {
      modelListShow: false,
      modelList: [], //模型列表
      propsList: [], //模型属性列表
      targetPropsList: [], //目标模型属性列表
      saveData: {
        sourceModelId: "", // 属性 id
        modelName: "", //模型名称
        sourceColumnId: null, //源模型属性id
        targetColumnId: null, //目标模型属性id
        targetModelId: null, //目标模型id
        targetModelName: "",
        relationName: "引用", //关系名称
      }, //新增关系弹窗要保存的数据
    };
  },
  created() {
    console.log(this.$route.params);
    this.getPropsData(this.$route.params.id);
    this.getModelsList();
  },
  mounted() {
    this.$nextTick(() => {
      if (this.rowData.type === "EDIT") {
        this.getTargetModelsList(this.rowData.targetModelId);
      } else {
        this.getTargetModelsList(this.$route.params.id);
      }
    });
  },
  methods: {
    //引用关系开关
    switchModelList() {
      this.modelListShow = !this.modelListShow;
    },
    //获取源模型属性列表
    getPropsData(ID) {
      let id = ID || -1;
      let params = { ...id };
      this.$axios
        .post(
          `${this.$api.modelDesign.logicModel.getModelPropertyList}?logicalModelId=${id}`
        )
        .then((res) => {
          let data = res.data.data;
          console.log(data);
          this.selectedModelList = data.logicalModelList.slice(0, 1);
          this.saveData.sourceModelId = this.selectedModelList[0].logicalModelId;
          this.saveData.modelName = this.selectedModelList[0].modelName;
          this.saveData.targetModelId =
            this.selectedModelList[0].logicalModelId;
          this.saveData.targetModelName = this.selectedModelList[0].modelName;
          this.propsList = data.fieldList;
          this.total = res.data.data.total;
          console.log(this.modelList);
          if (this.rowData.type === "EDIT") {
            //编辑状态：属性回填
            this.$nextTick(() => {
              this.getRowData(this.rowData);
            });
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message);
        });
    },
    //获取模型列表
    getModelsList(ID) {
      let id = ID || -1;
      let params = {
        source: 3,
        code: "model_logic",
      };
      this.$axios
        .post(this.$api.modelDesign.physicModel.getModelsList, params)
        .then((res) => {
          let data = res.data.data;
          this.modelList = data;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err.data.message);
        });
    },
    //获取目标模型属性列表
    getTargetModelsList(ID) {
      let id = ID || -1;
      this.$axios
        .post(
          `${this.$api.modelDesign.physicModel.getTargetModelProps}?logicalModelId=${id}`
        )
        .then((res) => {
          let data = res.data.data;
          this.modelListShow = false;
          this.targetPropsList = data.fieldList;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err.data.message);
        });
    },
    //编辑状态--获取回填数据
    getRowData(data) {
      console.log("回填", data);
      this.saveData.modelName = data.sourceModelName;
      this.saveData.sourceColumnId = data.sourceColumnId;
      this.saveData.sourceFiledName = data.sourceFiledName;
      this.saveData.targetModelName = data.targetModelName;
      this.saveData.targetModelId = data.targetModelId;
      this.saveData.targetColumnId = data.targetColumnId;
      this.saveData.relationName = data.relationName;
      this.$emit("saveData", this.saveData);
    },
    //点击更改目标模型
    handleChangeModel(item) {
      this.saveData.targetModelId = item.key;
      this.saveData.targetModelName = item.value;
      this.$emit("saveData", this.saveData);
      this.getTargetModelsList(item.key);
    },
    //改变引用关系
    changeRelationName(name) {
      this.saveData.relationName = name;
      this.$emit("saveData", this.saveData);
    },
    //选择模型属性
    handleChangeModelProp(id) {
      this.saveData.sourceColumnId = id;
      this.$emit("saveData", this.saveData);
    },
    //选择目标模型属性
    handleChangeTargetProp(id) {
      this.saveData.targetColumnId = id;
      this.$emit("saveData", this.saveData);
    },
  },
};
</script>
<style lang="scss" scoped>
.add-pop-warpper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.model-box {
  width: 25%;
  height: 50vh;
  border: 1px solid rgba(75, 113, 235, 0.16);
  border-radius: 4px;
  overflow: hidden;

  .model-msg-box {
    background: #4b71eb;
    color: #fff;
    text-align: center;
    p {
      line-height: 14px;
      padding: 12px;
    }
  }
  .el-button {
    width: 100%;
    border-radius: 0;
  }
  .list-warpper {
    height: calc(100% - 2rem);
    overflow: auto;
    .list-item {
      padding-left: 10px;
      border-bottom: 1px solid #eee;
      line-height: 2rem;
    }
    .list-item:hover {
      background: rgba(75, 113, 235, 0.16);
      color: #4b71eb;
      cursor: pointer;
    }
    .active {
      background: rgba(75, 113, 235, 0.4);
      color: #4b71eb;
      cursor: pointer;
    }
  }
  .el-radio-group {
    width: 100%;
  }
  .el-radio {
    border-bottom: 1px solid #eee;
    line-height: 2rem;
    display: block;
    margin: 0;
    padding-left: 10px;
  }
  .el-radio:hover {
    color: rgba(76, 113, 235, 0.7);
  }
}
</style>